<template>
  <el-header class="header">
    <div class="header-content">
      <div class="logo">
        <el-icon class="logo-icon"><OfficeBuilding /></el-icon>
        <span class="logo-text">Vue3 Admin</span>
      </div>
      <el-button 
        type="danger" 
        @click="handleLogout"
        class="logout-button"
      >
        <el-icon><SwitchButton /></el-icon>
        退出登录
      </el-button>
    </div>
  </el-header>
</template>

<script setup>
import { OfficeBuilding, SwitchButton } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../store/user'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()
const userStore = useUserStore()

const handleLogout = async () => {
  try {
    await ElMessageBox.confirm('确定要退出登录吗？', '操作确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    userStore.clearUser()
    ElMessage.success('退出登录成功')
    router.replace('/login')
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error(`退出失败: ${error.message}`)
    }
  }
}
</script>

<style scoped>
.header {
  background: #fff;
  box-shadow: 0 2px 12px #00000010;
}

.header-content {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-icon {
  font-size: 24px;
  color: var(--el-color-primary);
}

.logo-text {
  font-size: 20px;
  font-weight: 600;
}

.logout-button {
  padding: 10px 16px;
}
</style>